<template>
  <view class="container-wrapper wrapperLayer">
    <view class="backTitlebar-wrapper colCen borderBox">
      <view class="fixedBox">
        <view class="topbarbox"></view>
        <view class="headerNavigationbar rowCenBet borderBox">
          <view class="backIcon rowCenSta" @click="backUrl()">
            <image src="@/static/images/home/return.png" mode=""></image>
          </view>
          <view class="pageTitle">
            我的订单
          </view>
          <view class="statebox rowCenEnd" @click="reload()">
            <view class="stateText"  >
              刷新
            </view>
          </view>
        </view>

        <view class="search">
          <u-search shape="round" placeholder="输入订单号搜索" actionText="搜索" clearabled v-model="keyword" @search="getData(true)" @custom="getData(true)"></u-search>
        </view>
      </view>
      <view class="placeBox">
        <view class="topbarbox"></view>
        <view class="placeemptybox">
        </view>
      </view>

    </view>


    <view class="list">
      <u-empty v-if="list_data.length<1" text="没有订单数据哦" mode="data"></u-empty>
      <template v-for="(item,index) in list_data">

        <u-card :title="item.order_sn" :sub-title="item.status_text" :sub-title-color="item.status==1?'green':'default'" :thumb="getIcon(item.type)" thumb-width="40" @head-click="head_click(item)" >
          <view class="" slot="body" >
            <view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">

              <image :src="item.item_thumb" mode=""></image>
              <view class="u-body-item-title u-line-2 margin-left" @tap="body_click(item)">{{ item.item_title }}</view>

            </view>

          </view>
          <view class="" slot="foot">
            <u-row gutter="16" justify="space-between">
              <u-col span="6">
                <view class="demo-layout ">
                  {{ item.add_time }}
                </view>
              </u-col>
              <u-col span="3" v-if="item.commission>0">
                <view class="commission">
                  佣金{{item.commission}}元
                </view>
              </u-col>
              <!-- <u-col span="2">
                <view class=" btn-del bg-purple-light" ><u-icon name="trash-fill" size="45" color="#80808080" label="" @tap="del(item.order_sn)"></u-icon></view>
              </u-col> -->
            </u-row>
          </view>
        </u-card>
      </template>
      <view>
        <view class="top-btn" @tap="toTop" :style="{'display':(flag===false? 'none':'block')}">
          <text class="cuIcon-top"></text>
        </view>
      </view>
    </view>

  </view>

</template>

<script>
import UImage from "../../../uview-ui/components/u-image/u-image";
import UTable from "../../../uview-ui/components/u-table/u-table";
import UButton from "../../../uview-ui/components/u-button/u-button";
import UCard from "../../../uview-ui/components/u-card/u-card";
import UIcon from "../../../uview-ui/components/u-icon/u-icon";
import URow from "../../../uview-ui/components/u-row/u-row";
import UCol from "../../../uview-ui/components/u-col/u-col";
import USearch from "../../../uview-ui/components/u-search/u-search";
import UEmpty from "../../../uview-ui/components/u-empty/u-empty";
export default {
  title:'订单中心',
  components: {UEmpty, USearch, UCol, URow, UIcon, UCard, UButton, UTable, UImage},
  data() {
    return {
      type: null,
      list_data: [],
      canloadmore: false,
      currentPage: 1,
      flag: false,
      keyword:'',
    }
  },
  onLoad() {
    this.getData()
  },
  onShow() {
    // this.getData()
  },
  //下拉
  onPullDownRefresh() {
    this.getData(true);
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  //上拉
  onReachBottom(){
    this.getData();//加载
  },
  methods: {
    // 返回顶部
    toTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 100,
      });
    },

    onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
      this.flag = e.scrollTop > 10;
    },
    getData(reload) {
      uni.showLoading()
      if (reload) {
        this.currentPage = 1;
        this.list_data = [];
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 100,
        });
      }
      this.$http.post('union/api.order/getList', {
        limit: 10,
        offset: this.currentPage,
        type: this.type,
        keyword: this.keyword
      }, 'application/json').then(res => {
        if (res.length < 10) {
          this.currentPage = 1
        } else {
          this.currentPage += 1
          this.canloadmore = true
        }
        this.list_data = this.list_data.concat(res.data);
        uni.hideLoading()
      })

    },
    head_click(e){
      let orderSn = e.order_sn;
      if (orderSn) {
        uni.setClipboardData({
          data: orderSn,
          success: res => {
            uni.showToast({
              title: '订单号已复制',
              duration: 1000,
              icon: 'none'
            });
          }
        });
      }
    },
    body_click(e){
      uni.navigateTo({
        url: './detail?order_sn=' + e.order_sn+'&type='+e.type
      })
    },
    reload(){
      this.$http.post('union/api.order/refresh',{
        from:'order'
      },'application/json',true).then(res=>{
        uni.showToast({
          title: '刷新成功',
          duration: 1000,
          icon :'none'
        })
        if (res.status==1){
          this.getData(true)
        }
      })
    },
    getIcon(type){
      let icon;
      //订单类型，1-拼多多，2-小程序，3-亿起发，4-淘宝，5-京东，6-唯品会，7-其他，8-美团
      switch (type){
        case 1:
          icon = '../../../static/images/active/pdd.png';
          break;
        case 4:
          icon = '../../../static/images/active/tb.png';
          break;
      }
      return icon;
    },
    backUrl() {
      uni.navigateBack({
        delta: 1
      })
    },
    goDetails(info){
      uni.navigateTo({
        url: './detail?info=' + encodeURIComponent(JSON.stringify(info))
      })
    },

    del(order_sn){
      uni.showModal({
        title:'确定删除吗？',
        content:'删除'+order_sn,
        success:(res)=>{
          if (res.confirm) {
            this.$nextTick(()=>{
              this.$http.post('union/api.order/del',{
                order_sn:order_sn
              },'application/json',true).then(res=>{
                this.getData(true)
              })
            })
          } else if (res.cancel) {
            console.log('已取消');
          }

        },
      })

    }
  }
}
</script>

<style lang="scss">
.container-wrapper {
  .backTitlebar-wrapper {
    .placeBox {
      .placeemptybox {
        height: 90rpx;
      }
    }

    .fixedBox {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      background-color: #FFFFFF;

      .headerNavigationbar {
        width: 100%;
        height: 90rpx;
        padding: 0 32rpx;

        .backIcon {
          width: 60rpx;
          height: 32rpx;
          z-index: 1;

          image {
            width: 17rpx;
            height: 32rpx;
          }
        }

        .pageTitle {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
        }

        .statebox {
          width: 60rpx;

          .stateText {
            font-size: 26rpx;
            font-weight: 400;
            color: #1520d0;
          }
        }
      }
    }
  }
  .list{
    margin-top: 120rpx;
    .u-card-wrap {
      background-color: $u-bg-color;
      padding: 1px;
    }

    .u-body-item {
      font-size: 32rpx;
      color: #333;
      padding: 20rpx 10rpx;
    }

    .u-body-item image {
      width: 120rpx;
      flex: 0 0 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-left: 12rpx;
    }

    .btn-del{
      text-align: right;
    }

  }

  .top-btn {
    position: fixed;
    z-index: 9999;
    right: 16px;
    bottom: 100px;
    background-color: #9e9e9eb8;
    padding: 5px;
    display: none;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .top-btn .cuIcon-top {
    font-size: 30px;
    color: #FFFFFF;
  }

  .commission{
    background-color: orange;
    color: white;
    padding: 4rpx;
  }
  .search{
    width: 90%;
    text-align: center;
    margin: 0 auto;
    padding: 20rpx;;
  }
}
</style>
